import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { TabC, SelectC } from '../../../../comps';
import AnalysisOverview from './analysisOverview';
import CombinatorialOptimization from './combinatorialOptimization';
import CardC from '../comps/cardC';
import style from './index.less';
import url from '../../../../assets/busi/workStation/Barra/combinatorial_bg.png';
import moment from 'moment';
import _ from 'lodash';
@Form.create()
@connect(({ loading, workStationM }) => ({ loading, workStationM }))
export default class CombinatorialAnalysis extends PureComponent {
  state = {
    activeKey: 'AnalysisOverview',
    productCode: undefined,
    showContent: false, //展开收起标识
    productCodeHAnalysis: '',
    productCodeCombinatorial: '',
  };
  componentDidMount() {
    this.props.onRef(this);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const {
      form: { setFieldsValue },
    } = this.props;

    const { activeKey } = this.state;
    if (this.props.productCode != nextProps.productCode && nextProps.productCode) {
      const {
        workStationM: { productTableList = [] },
      } = this.props;
      let productObj = productTableList.filter((item) => {
        return item.value == nextProps.productCode;
      });
      this.setState({
        productCode: nextProps.productCode,
        myPortfolioType: nextProps.portfolioType, //得到父组件的组合状态
        myPortfolioId: productObj[0]?.portfolioId, //得到组父组件的组合id
      });
      if (activeKey == 'AnalysisOverview') {
        this.setState({
          productCodeHAnalysis: nextProps.productCode,
        });
      }
      if (activeKey == 'CombinatorialOptimization') {
        this.setState({
          productCodeCombinatorial: nextProps.productCode,
        });
      }
      setFieldsValue({ productCode: nextProps.productCode });
    }
    if (nextProps.state == 2 || nextProps.state == 4 || nextProps.state == 15 || nextProps.state == 16) {
      this.setState({
        showContent: true,
      });
    } else {
      this.setState({
        showContent: false,
      });
    }
  }
  // 父组件调用
  productOnChange = (portfolioCode, operateType) => {
    if (operateType == 1 && this.state.productCode == portfolioCode) {
      this.setState({
        showContent: false,
        productCode: '',
      });
      this.props.stateOnChange('2', 'fromOperate');
    }
  };
  // tab切换
  childrentabOnclick = (activeKey) => {
    this.setState({ activeKey }, () => {
      this.getTabData();
    });
  };
  getTabData = () => {
    const { activeKey } = this.state;
    if (activeKey == 'AnalysisOverview') {
      this.setState({
        productCodeHAnalysis: this.state.productCode,
      });
    }
    if (activeKey == 'CombinatorialOptimization') {
      this.setState({
        productCodeCombinatorial: this.state.productCode,
      });
    }
  };
  // 组合
  rightButton = () => {
    const {
      workStationM: { productTableList = [] },
    } = this.props;
    const formItemLayout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 20,
      },
    };
    return (
      <div style={{ width: '200px' }}>
        <SelectC
          form={this.props.form}
          dataIndex='productCode'
          title='组合'
          dataSource={productTableList}
          allowClear={false}
          positionBody={true}
          initialValue={this.state.productCode}
          filterOption={(
            input,
            option, //模糊搜索value 和 title
          ) => {
            return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
          }}
          onChange={this.protifiloChange}
          formItemLayout={formItemLayout}
          onRef={(ref) => (this.selectChange = ref)}
        />
      </div>
    );
  };
  // 组合点击响应
  protifiloChange = (productCode) => {
    const {
      workStationM: { productTableList = [] },
    } = this.props;
    let productObj = productTableList.filter((item) => item.value == productCode);
    this.setState(
      {
        productCode,
        myPortfolioType: productObj[0]?.portfolioType, //得到本组件选择的组合的状态
        myPortfolioId: productObj[0]?.portfolioId, //得到组父组件的组合id
      },
      () => {
        this.getTabData();
      },
    );
  };
  // 展开收起响应
  onExpendClick = (showContent) => {
    this.setState({ showContent });
    this.props.stateOnChange(showContent);
  };
  //组合优化改变下拉
  changePortfolio = (productCode) => {
    this.props.form.setFieldsValue({
      productCode: productCode,
    });
    sessionStorage.setItem('queryFlag','1')
    this.protifiloChange(productCode);
  };

  render() {
    const { productCode, showContent, productCodeHAnalysis, productCodeCombinatorial, myPortfolioType, myPortfolioId } = this.state;
    const {
      state,
      workStationM: { productTableList = [] },
      flag,
      indexCode,
    } = this.props;
    let productData = productTableList.filter((item) => item.value == productCode);
    return (
      <div className={style.mainBox}>
        <div className={style.openBox} style={{ display: showContent ? 'block' : 'none' }}>
          {/* 展开 */}
          <CardC
            title='组合分析优化'
            type='4'
            showContent={showContent}
            onExpendClick={this.onExpendClick}
            content={
              <div className={style.boxContent}>
                <TabC
                  type='secondTab'
                  tabSource={[
                    {
                      title: '分析概览',
                      key: 'AnalysisOverview',
                      content: <AnalysisOverview productCode={productCodeHAnalysis} portfolioType={myPortfolioType} flag={flag} indexCode={indexCode} />,
                    },
                    {
                      title: '组合优化',
                      key: 'CombinatorialOptimization',
                      content: (
                        <CombinatorialOptimization
                          changePortfolio={this.changePortfolio}
                          productCode={productCodeCombinatorial}
                          portfolioId={myPortfolioId}
                          portfolioType={myPortfolioType}
                        />
                      ),
                    },
                  ]}
                  activeKey={this.state.activeKey}
                  onChange={this.childrentabOnclick}
                  tabBarExtraContent={this.rightButton()}
                />
              </div>
            }
          />
        </div>
        <div className={style.closeBox} style={{ display: showContent ? 'none' : 'block', overflow: 'hidden' }}>
          {/* 收起 */}
          <CardC
            title='组合分析优化'
            type='4'
            showContent={showContent}
            onExpendClick={this.onExpendClick}
            titleIsShow={productCode ? true : false}
            content={
              <div>
                {!productCode && <div className={style.boxContent}>选择产品后开始使用</div>}
                {productCode && (state == 1 || state == 3 || state == 13 || state == 14) && (
                  <div className={style.boxContent}>
                    <div>
                      <span>{productData && productData.length ? productData[0].title : '--'}</span>
                    </div>
                    <div>该产品/组合成立至今</div>
                    <div>
                      累计收益率<span>100.00 </span>%，波动率<span>58.00</span>%
                    </div>
                  </div>
                )}
                {productCode && (state == 11 || state == 12) && (
                  <div className={style.boxContent}>
                    <div>
                      <span>{productData && productData.length ? productData[0].title : '--'}</span>
                    </div>
                    <div>该产品/组合成立至今</div>
                    <div>
                      累计收益率<span>100.00</span>%
                    </div>
                    <div>
                      波动率<span>58.00 </span>%
                    </div>
                  </div>
                )}
                <div className={style.closeBoxbg}>
                  <img src={url} />
                </div>
              </div>
            }
          />
        </div>
      </div>
    );
  }
}
